<template>
  <div class="measure">
    <el-button color="#626aef" :dark="false" plain @click="measureDistance">测量距离</el-button>
    <el-button color="#626aef" :dark="false" plain @click="measureArea">测量面积</el-button>
    <el-button color="#f56c6c" :dark="false" plain @click="closeMeasure">取消测量</el-button>
    <el-button color="#f56c6c" :dark="false" plain @click="clearContent">清除内容</el-button>
    <el-button color="#67c23a" :dark="false" plain @click="downloadMap">下载地图</el-button>
  </div>
</template>

<script setup>
import { useTools } from './Hooks/useTools'
const { measureDistance, measureArea, closeMeasure, clearContent, downloadMap } = useTools()
</script>

<!-- 工具箱-测量 -->
<style>
/* 提示框的样式信息  */
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}
</style>
<style scoped>
.measure {
  position: fixed;
  right: 5px;
  bottom: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}
.measure .el-button {
  width: 80px;
  margin: 3px 0;
}
</style>
